<template>
  <div class="provincial-office-performance">
    <P class="title">省厅指标完成情况</P>
    <div class="office-performance-main">

      <div class="list" @click="onClik($event)">
          <!-- :data-item="JSON.stringify(item)" -->
          <div class="item" v-for="(item,index) in list" :key="index">
            <div class="item-bg">
              <div class="item-num">{{ item.val1 }}</div>
              <div class="item-num">{{ item.val2 }}</div>
            </div>
            <div class="item-txt">{{item.txt }}</div>
          </div>
      </div>

    </div>

    <!-- 提示框 -->
    <div v-if="visible" class="record-database-popper">
          <div class="popper-details flex">
            <p>更新频率</p>
            <span>{{ '1' }}</span>
          </div>
          <div class="popper-details flex">
            <p>最近更新时间</p>
            <span>{{ '2' }}</span>
          </div>
          <div class="popper-details">
            <p>指标说明</p>
            <span>{{ '3' }}</span>
          </div>
    </div>

  </div>
</template>

<script>
export default {
  components: {
  },
  props:{
    list:{
      type:Array,
      default:() => {
        return [
          { val1: 16.3,val2:12,txt:'省级示范点数量',hz:'200',time:'20230307',msg:'说明信息' },
          { val1: 16.3,val2:12,txt:'身后一件事联办率',hz:'300',time:'20230307',msg:'说明信息' },
          { val1: 16.3,val2:12,txt:'身后一件事 部门参与数',hz:'400',time:'20230307',msg:'说明信息' },
        ]
      }
    }
  },
  data(){
    return{
      visible: false,
      item1:''
    }
  },
  mounted() {
  },
  methods: {
    onClik(e){
      let clickDom = e.target // 点击的元素
      let listChildDom = document.querySelector('.item').childNodes
      if( Array.from(listChildDom).includes(clickDom) ){
        console.log(clickDom);
      }
      // console.log(Boolean(e.target.dataset.item));
      // // 1.先判断点击的是list中的item还是list
      // if(e.target.dataset.item){
      //   // 2.算出点击元素的位置
      //   let clientRect = e.target.getBoundingClientRect();
      //   const { top,left } = clientRect
      //   console.log(top,left);
      //   console.log(clientRect);
      //   // 4.通过自定义属性拿到绑定的item
      //   // vue中自定义属性格式为 :data-xxx,获取为：e.target.dataset.xxx
      //   // console.log(e.target.dataset.item);
      //   // 先赋值再显示，再移动位置
      //   this.item = JSON.parse(e.target.dataset.item)
      //   this.show = true
      //   this.$nextTick(() => {
      //     // 3.计算出弹框要显示的位置 + 绝对定位
      //     let dialogDom = document.querySelector('.dialog')
      //     dialogDom.style.position = 'absolute'
      //     dialogDom.style.left = `${ left }px`
      //     dialogDom.style.top = `${ top }px`
      //   })
      // }else{
      //   return
      // }
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length,如果把这一行注释掉就是超出才会滚动
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
}
</script>

<style lang="scss" scoped>
@function companyW($num) {
  @return ($num * 100)/1920;
}
@function companyH($num) {
  @return ($num * 100)/1080;
}
@font-face {
  font-family: 'YouSheBiaoTiHei';
  src: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/fontFamily/YouSheBiaoTiHei-2.ttf');
}
@font-face {
  font-family: 'Alibaba PuHuiTi';
  src: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/fontFamily/ALIBABAPUHUITI_2_105_HEAVY.TTF');
}

.provincial-office-performance{
  width: companyW(441vw);
  height: companyH(234vh);
  background: url("https://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/sj-qxzbwcqk-bg.png") no-repeat;
  background-size: 100% 100%;
  margin-right: companyW(14vw);
  .title{
    font-size: companyH(24vh);
    font-family: Alibaba PuHuiTi;
    font-weight: 800;
    font-style: italic;
    color: #FFFFFF;
    background: linear-gradient(0deg, #8BC7FE 0%,#fff 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-left: companyW(67vw);
    box-sizing: border-box;
    line-height: companyH(45vh);
  }
  .office-performance-main{
    margin: companyH(12vw) companyW(30vw);
    .warp{
          overflow: hidden;
        }
    .list{
      width: companyW(381vw);
      height: companyH(210vh);
      display: flex;
      justify-content: space-between;
      // background-color: aqua;
      .item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        // background-color: aqua;
      }
      .item-bg{
        width: companyW(96vw);
        height: companyH(88vh);
        background: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/office-performance-bg.png') no-repeat;
        background-size: 100% 100%;
        font-size: companyH(18vh);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #F0F0F0;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: companyH(17vh);
        padding-bottom: companyH(12vh);
        box-sizing: border-box;
        .ktem{
          cursor: pointer;
        }
        .item-num{
          margin-bottom: companyH(10vh);
          width: companyW(83vw);
          height: companyH(21vh);
          // background: linear-gradient(to right,#024194,#0f93f0,#024194);
          background: url('http://srwebapp.oss-cn-beijing.aliyuncs.com/web/hangzhou-civil-admin-board/good-example/performance-item-bg.png') no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: companyH(21vh);

        }
      }
      .item-txt{
        font-size: companyH(12vh);
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: companyH(21vh);
        width: companyW(96vw);
        text-align: center;
        transform: scale(0.8);
        margin-top: companyH(18vh);
      }
    }
  }
  .record-database-popper {
        width: companyW(250vw);
        height: companyH(150vh);
        background-color: #032542;
        border: 1px solid rgba(0, 216, 255, 1);
        border-image: linear-gradient(180deg, #00D8FF) 10 10;
        box-shadow: 0px 0px 13px 0px #032542;
        border-radius: 10px;
        padding: companyH(15vh) companyW(15vw);
      .popper-details {
        margin-bottom: companyH(15vh);

        p {
          font-size: companyH(14vh);
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }

        span {
          font-size: companyH(16vh);
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
        }
      }

      .popper-details:last-child {
        margin-bottom: 0;

        p {
          margin-bottom: companyH(10vh);
        }
      }

      .flex {
        display: flex;
        justify-content: space-between;
      }
  }
}
</style>
